<template>
  <div class="user-profile">
    <!-- 导航栏 -->
    <van-nav-bar
      class="page-nav-bar"
      title="个人信息"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- /导航栏 -->
    <van-cell title="头像" @click="chooseImg" is-link>
      <van-image class="avatar" fit="cover" round :src="usr.photo" />
    </van-cell>
    <!-- 隐藏文件选框 -->
    <input ref="fileA" @change="imgChange" type="file" style="display: none" />

    <van-cell
      title="昵称"
      @click="showEditName = true"
      :value="usr.name"
      is-link
    />
    <van-cell
      title="性别"
      @click="showEditGender = true"
      :value="usr.gender === 1 ? '女' : '男'"
      is-link
    />
    <van-cell
      title="生日"
      @click="showEditBirthday = true"
      :value="usr.birthday"
      is-link
    />

    <!-- 弹层0：剪切图片 -->
    <van-popup
      v-model="showEditPhoto"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <UpdatePhoto
        v-if="showEditPhoto"
        @onClose="showEditPhoto = false"
        @onChangePhoto="usr.photo = $event"
        :imgData="imgD"
      />
    </van-popup>

    <!-- 弹层1：修改昵称 -->
    <van-popup
      v-model="showEditName"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <UpdateName
        v-if="showEditName"
        @onclose="showEditName = false"
        v-model="usr.name"
      />
    </van-popup>

    <!-- 弹层2：修改性别 -->
    <van-popup
      v-model="showEditGender"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <UpdateGender v-model="usr.gender" @onclose="showEditGender = false" />
    </van-popup>

    <!-- 弹层3：修改生日 -->
    <van-popup
      v-model="showEditBirthday"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <UpdateBirthday
        @onclose="showEditBirthday = false"
        v-model="usr.birthday"
      />
    </van-popup>
  </div>
</template>

<script>
// 导入 api 接口
import { getProfile } from '@/api/user.js'
// 导入 组件
import UpdateName from './components/UpdateName.vue'
import UpdateGender from './components/UpdateGender.vue'
import UpdateBirthday from './components/UpdateBirthday.vue'
import UpdatePhoto from './components/UpdatePhoto.vue'

export default {
  name: '',
  props: {},
  data() {
    return {
      // 图片数据
      imgD: {},
      // 控制 修改头像 弹层
      showEditPhoto: false,
      // 控制 修改昵称 弹层
      showEditName: false,
      // 控制 修改性别 弹层
      showEditGender: false,
      // 控制 修改生日 弹层
      showEditBirthday: false,
      usr: {}
    }
  },
  // 钩子函数（入口函数）
  async created() {
    // 请求接口
    const res = await getProfile()
    // 获取用户信息对象
    this.usr = res.data.data
  },
  methods: {
    // 1.模拟文件选择框被点击 ------------------------
    chooseImg() {
      this.$refs.fileA.click()
      //   this.$refs.fileA.onclick()
    },
    // 2.文件选择改变事件方法 ------------------------
    imgChange(e) {
      // a.打开 图片剪裁 弹层
      this.showEditPhoto = true
      // b.将 选中的 图片数据 传给 图片剪裁组件
      const cFile = this.$refs.fileA.files[0]
      const imgData = URL.createObjectURL(cFile)
      this.imgD = imgData
    }
  },
  computed: {},
  watch: {},
  components: { UpdateName, UpdateGender, UpdateBirthday, UpdatePhoto }
}
</script>

<style lang="less" scoped>
.user-profile {
  .avatar {
    width: 60px;
    height: 60px;
  }
  /deep/ .van-nav-bar {
    .van-nav-bar__left {
      .van-icon {
        color: #fff;
      }
    }
  }
}

/deep/ .van-popup {
  background: #f5f7f9;
  .van-nav-bar__text {
    color: #fff;
  }
}
</style>
